/**
* Description: 成员设置
*
* Created by hrx on 2023/9/18
*/
<template>
  <div class="member">
    <div class="content">
      <!-- 头部搜索栏 -->
      <div class="state" style="width: 100%">
        <div class="title">成员管理</div>
        <div class="left">
          <el-button :icon="Plus" type="primary" class="add-button" @click="addMember">
            创建成员
          </el-button>
        </div>
        <el-form :model="form" ref="formRef" inline label-position="top" class="rightForm">
          <el-form-item>
            <el-select
              v-model="form.data.status"
              placeholder="请选择状态"
              class="right20"
              style="width: 160px; height: 36px"
              clearable
              collapse-tags
              filterable
            >
              <el-option
                v-for="item in $CONSTANTS.USER_STATUS_LIST"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select
              v-model="form.data.tag"
              style="width: 160px; height: 36px"
              placeholder="请选择标签"
              clearable
              filterable
            >
              <el-option
                v-for="item in tagsIdList"
                :key="item.id"
                :label="item.tagName"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select
              v-model="form.data.userType"
              placeholder="请选择用户类型"
              style="width: 160px; height: 36px;"
              clearable
              collapse-tags
              filterable
            >
              <el-option
                v-for="item in $CONSTANTS.USER_TYPE_LIST"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <DeptCascader ref="deptCascaderRef" v-model="form.data.deptIdArrayList"/>
          </el-form-item>
          <el-form-item>
            <el-input
              style="width: 160px; height: 36px;"
              placeholder="请输入账号或姓名"
              v-model="form.data.userName"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" class="search-button" @click="getListData('search')">搜索</el-button>
            <el-button class="clear-button" @click="resetData()">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 数据展示部分 -->
      <div class="tablePage">
        <Table
          ref="tableRef"
          :not-data-img="$CONSTANTS.NOT_DATA_IMG"
          :table-columns="tableTitle"
          :remote-api="getMemberListApi"
          :autoLoad="false"
          :pageNumberList="[10, 20, 50, 100]"
          ppageFieldName="page"
          pnumberFieldName="limit"
          @sortChange="sortChange"
        >
          <template #index="scope">
            {{ scope.index + 1 }}
          </template>
          <template #userAccount="scope">
             <span class="mainColor userAccount" @click="openUserFiles(scope.row)">
                {{ scope.row.userAccount }}
              </span>
          </template>
          <template #oneselfImage="scope">
            <el-image
              v-show="scope.row.oneselfImage"
              referrerPolicy="no-referrer"
              :src="scope.row.oneselfImage"
              :preview-src-list="[scope.row.oneselfImage]"
              style="width: 90px; height: 90px; object-fit: cover"
              preview-teleported
            ></el-image>
          </template>
          <template #workPermitImage="scope">
            <el-image
              v-show="scope.row.workPermitImage"
              referrerPolicy="no-referrer"
              :src="scope.row.workPermitImage"
              :preview-src-list="[scope.row.workPermitImage]"
              style="width: 90px; height: 90px; object-fit: cover"
              preview-teleported
            ></el-image>
          </template>
          <template #gender="scope">
            {{ scope.row.gender == 1 ? "男" : "女" }}
          </template>
          <template #userType="scope">
            {{ $CONSTANTS.USER_TYPE[scope.row.userType] }}
          </template>
          <template #status="scope">
            {{
              $CONSTANTS.USER_STATUS[scope.row.status]
            }}
          </template>
          <template #origin="scope">
            {{
              $CONSTANTS.USER_ORIGIN[scope.row.origin]
            }}
          </template>
          <template #operate="scope">
            <el-button type="primary" class="edit-button" @click="editMember(scope.row)">
              编辑
            </el-button>
            <el-button
              type="danger"
              :icon="Delete"
              class="delete-button"
              @click="delMember(scope.row)"/>
          </template>
        </Table>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {
  getMemberListApi,
  getTagsListApi,
  memberDetailDTO,
  queryMemberListParam,
  tagsDetailDTO
} from "@/api/member"
import type {ITableColumnItem} from "@/components/common/Table.vue";
import {IBaseQueryDataListParams} from "@/api";
import $CONSTANTS from '@/constants/globalConstants'
import {Delete, Plus} from "@element-plus/icons-vue";
import {FILED_SORT_ORDER_MAP, MEMBER_FILED_SORT_TYPE_MAP} from "@/constants/mapConstants";

const formRef = ref();
const tableRef = ref();
const deptCascaderRef = ref();

const form = reactive<IBaseQueryDataListParams<queryMemberListParam>>({
  data: {
    deptIdArrayList: undefined,
    status: undefined,
    userType: undefined,
    filedSortType: undefined,
    sortStatus: undefined,
    tag: undefined,
    userName: undefined
  }
})

const tableTitle: Array<ITableColumnItem> = [
    {label: "序号", prop: "index", width: 80, align: "center", fixed: "left", template: true},
    {label: "学员账号", prop: "userAccount", width: 120, align: "left", fixed: "left", template: true, },
    {label: "本人照片", prop: "oneselfImage", fixed: "left", width: 120, template: true},
    {label: "工作证照片", prop: "workPermitImage", width: 120, template: true,},
    {label: "姓名", prop: "userName", sortable: "custom", width: 120},
    {label: "性别", prop: "gender", template: true},
    {label: "手机号", prop: "phoneNum", width: 120},
    {label: "身份证后四位", prop: "idCardLastFour", width: 120},
    {label: "微信昵称", prop: "otherName"},
    {label: "人员类别", prop: "memberTypeName", sortable: "custom", width: 120},
    {label: "工号", prop: "jobNum", sortable: "custom", width: 120},
    {label: "所在科室", prop: "hospitalDeptName", width: 120},
    {label: "负责科室", prop: "responsibleDeptName", sortable: "custom", width: 120},
    {label: "负责护理", prop: "responsibleNurseName", width: 120},
    {label: "归口管理科室", prop: "centralManageDeptName", sortable: "custom", width: 180},
    {label: "管理科室", prop: "managersDeptName", width: 180},
    {label: "岗位", prop: "postName", sortable: "custom", width: 120},
    {label: "岗位性质", prop: "postNaturesName"},
    {label: "角色/职务", prop: "jobName", sortable: "custom", width: 120},
    {label: "学分卡号", prop: "creditCardNum"},
    {label: "标签", prop: "tagName"},
    {label: "用户类型", prop: "userType", template: true},
    {label: "角色(权限)", prop: "roleName", width: 180},
    {label: "状态", prop: "status", template: true},
    {label: "账号来源", prop: "origin", template: true},
    {label: "创建时间",prop: "createTime",sortable: "custom",width: 180},
    {label: "更新时间", prop: "updateTime", width: 180},
    {label: "操作", prop: "operate", template: true, fixed: "right", width: 150},
]

const tagsIdList = ref<Array<tagsDetailDTO>>();

const addMember = () => {

}
const editMember = (item: memberDetailDTO) => {

}
const delMember = (item: memberDetailDTO) => {

}
const openUserFiles = (item: memberDetailDTO) => {
  console.log(item)
}
const getListData = (type: string) => {
  if (type === "search") {
    tableRef?.value?.refreshData(form);
  } else {
    tableRef?.value?.queryData(form);
  }
}

const getTagsList = async () => {
  let res = await getTagsListApi();
  tagsIdList.value = res.data.data;
}

const resetData = () => {
  form.data.deptIdArrayList = undefined;
  form.data.status = undefined;
  form.data.userType = undefined;
  form.data.tag = undefined;
  form.data.userName = undefined;
  deptCascaderRef.value.resetData();
  tableRef.value.refreshData(form)
}

const sortChange =(column: any) => {
  if(column.order){
    form.data.filedSortType = MEMBER_FILED_SORT_TYPE_MAP[column.prop].VALUE
    form.data.sortStatus = FILED_SORT_ORDER_MAP[column.order].TITLE
  } else {
    form.data.filedSortType = undefined
    form.data.sortStatus = undefined
  }
  getListData('getData')
}

onMounted(() => {
  getListData('getData')
  getTagsList();
})

</script>

<style lang="scss" scoped>
.member{
  height: 100%;

  .userAccount {
    cursor: pointer;
    color: $theme-color
  }
  .rightForm {
    display: flex;
    align-items: start;
    .el-form-item {
      margin-right: 10px;
    }
  }
}
</style>